import { PcSeriveProvider } from "./../../../providers/pc-serive/pc-serive";
import { Component, Renderer2, ViewChild } from "@angular/core";
import {
  IonicPage,
  NavController,
  NavParams,
  ToastController
} from "ionic-angular";
import { BaseUI } from "../../../common/baseUI";

/**
 * Generated class for the PcMyreportPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: "page-pc-myreport",
  templateUrl: "pc-myreport.html"
})
export class PcMyreportPage extends BaseUI {
  avatar; //头像
  evalcode; //评测id
  allvalue: number = 0; //总分
  allvalue2: number = 0;
  data = {
    userCode: null,
    evaluatingCode: null
  };
  showlist;

  @ViewChild("bgPaper") bgPaper;
  @ViewChild("myReportContent") myReportContent;
  @ViewChild("myReport") myReport;
  zIndex: number = 1;
  //保存两个div的样式
  reportContentData: object = {};
  reportData: object = {};
  //动画是否在进行中
  animationIsIng: boolean = false;
  //用户名
  userName: string;

  showlistlast;
  evalDatas;
  userid: number;
  bgIndex: number;


  divFirst: boolean = true;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private pcSerive: PcSeriveProvider,
    private render: Renderer2,
    public toastCtrl: ToastController
  ) {
    super();
    this.evalcode = this.navParams.get("evalcode");
    this.userid = this.bgIndex = this.navParams.get("userid");

    this.evalDatas = this.navParams.get("evalDatas");
    this.userName = this.evalDatas[this.bgIndex]['realname'];

    this.data["evaluatingCode"] = this.evalcode;
    this.data["userCode"] = this.evalDatas[this.userid]["usercode"];


    this.init();
  }

  init() {
    this.changePhoto();
    this.pcSerive.getMyRp(this.data).subscribe(
      data => {
        this.showlist = JSON.parse(data["evaluatingallthescores"]);
        for (let index = 0; index < this.showlist.length; index++) {
          this.allvalue = this.allvalue + this.showlist[index]["value"];
        }
      },
      err => {
        this.showToast(this.toastCtrl, "请求数据失败，请重试");
      }
    );

    this.data["userCode"] = this.evalDatas[this.userid == this.evalDatas.length - 1 ? 0 : this.userid + 1]["usercode"];
    this.pcSerive.getMyRp(this.data).subscribe(
      data => {
        this.showlistlast = JSON.parse(data["evaluatingallthescores"]);
        for (let index = 0; index < this.showlistlast.length; index++) {
          this.allvalue2 = this.allvalue2 + this.showlistlast[index]["value"];
        }
      },
      err => {
        this.showToast(this.toastCtrl, "请求数据失败，请重试");
      }
    );
  }

  ionViewDidLoad() {
    //对动画承载节点的样式保存
    this.reportContentData[
      "width"
    ] = this.myReportContent.nativeElement.clientWidth;
    this.reportContentData[
      "height"
    ] = this.myReportContent.nativeElement.clientHeight;
    this.reportContentData[
      "left"
    ] = this.myReportContent.nativeElement.offsetLeft;
    this.reportContentData[
      "top"
    ] = this.myReportContent.nativeElement.offsetTop;

    this.reportData["width"] = this.bgPaper.nativeElement.clientWidth;
    this.reportData["height"] = this.bgPaper.nativeElement.clientHeight;
    this.reportData["left"] = this.bgPaper.nativeElement.offsetLeft;
    this.reportData["top"] = this.bgPaper.nativeElement.offsetTop;
  }

  /**
   * 右滑动画
   * @param firstDiv 在前面显示的div
   * @param lastDiv 在后面显示的div
   * @param toggle 哪个数据做切换
   */
  translate(firstDiv, lastDiv, toggle) {
    new Promise((res, rej) => {
      this.setStyle(lastDiv, "left", "100%");
      this.setStyle(lastDiv, "width", this.reportContentData["width"] + "px");
      this.setStyle(
        lastDiv,
        "height",
        this.reportContentData["height"] + "px"
      );
      setTimeout(() => {
        res();
      }, 300);
    }).then(() => {
      this.zIndex = this.zIndex + 1;
      this.setStyle(lastDiv, "zIndex", this.zIndex);
      setTimeout(() => {
        this.setStyle(lastDiv, "left", this.reportContentData["left"]);
        this.setStyle(lastDiv, "top", this.reportContentData["top"] + "px");

        this.setStyle(firstDiv, "top", this.reportData["top"] + "px");
        this.setStyle(firstDiv, "height", this.reportData["height"] + "px");

        this.setStyle(firstDiv, "width", this.reportData["width"] + "px");
        this.setStyle(firstDiv, "left", this.reportData["left"] + "px");

        this.data["userCode"] = this.evalDatas[this.userid == this.evalDatas.length - 1 ? this.userid = 0 : ++this.userid]["usercode"];
        this.toggle();
        this.animationIsIng = false;
      }, 300);
    });
  }

  //监听滑动
  pan($event) {
    if (
      $event.direction == 2
    ) {

      //如果动画正在进行
      if (this.animationIsIng) return;
      this.animationIsIng = true;
      this.bgIndex >= this.evalDatas.length - 1 ? this.bgIndex = 0 : ++this.bgIndex;
      this.changePhoto();

      if (this.zIndex % 2 != 0) {
        this.translate(
          this.myReportContent.nativeElement,
          this.bgPaper.nativeElement,
          1
        );

      } else {
        this.translate(
          this.bgPaper.nativeElement,
          this.myReportContent.nativeElement,
          0
        );

      }
    }

    //往左滑
    if ($event.direction == 4) {
      //如果动画正在进行
      if (this.animationIsIng) return;
      this.bgIndex <= 0 ? this.bgIndex = this.evalDatas.length - 1 : --this.bgIndex;
      this.changePhoto();
      this.animationIsIng = true;
      if (this.zIndex % 2 != 0) {
        this.translatePrevious(
          this.myReportContent.nativeElement,
          this.bgPaper.nativeElement,
          1
        );

      } else {
        this.translatePrevious(
          this.bgPaper.nativeElement,
          this.myReportContent.nativeElement,
          0
        );

      }
    }
  }

  changePhoto() {
    this.userName = this.evalDatas[this.bgIndex]['realname'];
    this.pcSerive.getuser(this.evalDatas[this.bgIndex]["usercode"]).subscribe(
      data => {
        this.avatar = data["avatar"];
      },
      err => {
        this.showToast(this.toastCtrl, "请求数据失败，请重试");
      }
    );
  }

  /**
   * 往上一页的动画
   * @param firstDiv 在前面显示的div
   * @param lastDiv 在后面显示的div
   * @param toggle 哪个数据做切换
   */
  translatePrevious(firstDiv, lastDiv, toggle) {
    this.zIndex = this.zIndex + 1;


    this.setStyle(firstDiv, "left", "-90%");
    setTimeout(() => {
      this.setStyle(lastDiv, "zIndex", this.zIndex);
    }, 300);

    setTimeout(() => {
      this.setStyle(lastDiv, 'left', this.reportContentData["left"] + "px");
      this.setStyle(firstDiv, 'left', this.reportData['left'] + 'px');
      this.setStyle(firstDiv, 'width', this.reportData['width'] + 'px');
      this.setStyle(firstDiv, 'top', this.reportData['top'] + 'px');

      this.setStyle(firstDiv, 'height', this.reportData['height'] + 'px');

      this.setStyle(lastDiv, 'width', this.reportContentData["width"] + "px");

      setTimeout(() => {
        this.setStyle(lastDiv, 'height', this.reportContentData["height"] + "px");
        this.setStyle(lastDiv, 'top', this.reportContentData["top"] + "px");
      }, 300);

      this.data["userCode"] = this.evalDatas[this.userid <= 0 ? this.userid = this.evalDatas.length - 1 : --this.userid]["usercode"];
      this.toggle();
      this.animationIsIng = false;
    }, 500);
  }

  //动画结束后数据的切换
  toggle() {
    this.allvalue2 = 0;
    this.allvalue = 0;
    this.pcSerive.getMyRp(this.data).subscribe(
      data => {
        if (this.divFirst) {
          this.showlistlast = JSON.parse(data["evaluatingallthescores"]);
          for (let index = 0; index < this.showlistlast.length; index++) {
            this.allvalue2 = this.allvalue2 + this.showlistlast[index]["value"];
          }
        } else {
          this.showlist = JSON.parse(data["evaluatingallthescores"]);
          for (let index = 0; index < this.showlist.length; index++) {
            this.allvalue = this.allvalue + this.showlist[index]["value"];
          }
        }
        this.divFirst = !this.divFirst;
      },
      err => {
        this.showToast(this.toastCtrl, "请求数据失败，请重试");
      }
    );
  }

  //设置样式
  setStyle(el, style, value) {
    this.render.setStyle(el, style, value);
  }
}
